<!DOCTYPE html>
<html>
<head>
    <title>福州市三位规划辅助系统</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="js/plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="c-layout show-right-panel show-bottom-panel" id="c-layout">
        <!-- 顶部 -->
        <div class="c-layout-header">
            <div class="c-header">
                <!-- logo -->
                <div class="c-logo"><img src="img/logo.png"></div>
                <!-- 顶部工具按钮 -->
                <div class="c-btns">
                    <div class="c-btn-group">
                        <div class="c-icon c-icon-map" id="toggle-menu"></div>
                        <div class="c-icon c-icon-map"></div>
                    </div>
                    <div class="c-btn-group-divider"></div>
                    <div class="c-btn-group">
                        <div class="c-icon c-icon-map"></div>
                        <div class="c-icon c-icon-map"></div>
                    </div>
                    <div class="c-btn-group-divider"></div>
                    <div class="c-btn-group">
                        <div class="c-icon c-icon-map"></div>
                        <div class="c-icon c-icon-map"></div>
                    </div>
                    <div class="c-btn-group-divider"></div>
                    <div class="c-btn-group">
                        <div class="c-icon c-icon-menu"></div>
                    </div>
                </div>
                <!-- 系统时间 -->
                <div class="c-time">
                    <div class="c-time-content">
                        <div class="c-time-time">
                            11:53:20
                        </div>
                        <div class="c-time-week">
                            星期一
                        </div>
                        <div class="c-time-day">
                            2019/08/12
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主体 -->
        <div class="c-layout-main"></div>

        <!-- 右侧弹出面板 -->
        <div class="c-layout-right" id="c-layout-right">
            <div class="c-panel">
                <div class="c-panel-header">
                    <i class="c-panel-header-icon"></i>
                    <span class="c-panel-header-title">场景参数</span>
                    <div class="c-panel-header-close" id="c-panel-header-close"></div>
                </div>
                <div class="c-panel-body">
                    <div style="padding: 16px">
                        <p>面板内容...</p>
                        <p>面板内容...</p>
                        <p>面板内容...</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部操作面板 -->
        <div class="c-layout-bottom" id="c-layout-bottom">
            <div class="c-bottom">
                <div class="c-bottom-ctrl" id="c-bottom-ctrl"></div>
                <div class="c-bottom-body">
                    <div class="c-bottom-content" id="c-bottom-content">
                        <div style="width: 2100px;overflow: hidden;">
                            <div class="c-bottom-content-panel" style="width: 577px">

                                <div class="c-form-item" style="margin-bottom: 8px;">
                                    <div class="c-fom-item-select-with-title">
                                        <label>选择项目：</label>
                                        <select class="c-fom-item-select">
                                            <option value="1">选项一</option>
                                            <option value="2">选项二</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="c-row">
                                    <div class="c-col">
                                        <div class="c-form-item">
                                            <label class="c-form-item-checkbox">
                                                <input type="checkbox" /> <span>切换飞行</span>
                                            </label>
                                            <br>
                                            <label class="c-form-item-checkbox">
                                                <input type="checkbox" /> <span>现状模型</span>
                                            </label>
                                            <br>
                                            <label class="c-form-item-checkbox">
                                                <input type="checkbox" /> <span>规划模型</span>
                                            </label>
                                            <br>
                                            <label class="c-form-item-checkbox">
                                                <input type="checkbox" /> <span>辅助数据</span>
                                            </label>
                                            <br>
                                            <label class="c-form-item-checkbox">
                                                <input type="checkbox" /> <span>起伏显示</span>
                                            </label>
                                        </div>

                                        <div class="c-button">
                                            <div class="c-button-text">项目编辑</div>
                                        </div>
                                    </div>

                                    <div class="c-col" style="margin-left: 8px;">
                                        <div class="c-bottom-mini-panel do-nicescrol">
                                            <table>
                                                <tbody>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>用地红线</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="c-col" style="margin-left: 8px;">
                                        <div class="c-bottom-mini-panel do-nicescrol">
                                            <table>
                                                <tbody>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>用地红线</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="c-col" style="margin-left: 8px;">
                                        <div class="c-bottom-mini-panel do-nicescrol">
                                            <table>
                                                <tbody>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>用地红线</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: center;"><div class="c-form-item"><label class="c-form-item-radio"><input type="radio" name="1" /><span></span></label></div></td>
                                                        <td>地形归零面</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="c-bottom-content-panel" style="width: 240px">
                                <div class="c-bottom-content-panel-title">
                                    场景定位：
                                </div>
                                <div class="c-row">
                                    <div class="c-col c-btns">
                                        <div class="c-button">
                                            <div class="c-button-text">按钮名称</div>
                                        </div>
                                        <div class="c-button">
                                            <div class="c-button-text">按钮名称</div>
                                        </div>
                                        <div class="c-button">
                                            <div class="c-button-text">按钮名称</div>
                                        </div>
                                        <div class="c-button">
                                            <div class="c-button-text">按钮名称</div>
                                        </div>
                                    </div>
                                    <div class="c-col">
                                        <div class="c-bottom-mini-panel do-nicescrol" style="width: 140px;margin-top: 8px;">
                                            <ul class="c-list">
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="c-bottom-content-panel" style="width: 240px">
                                <div class="c-bottom-content-panel-title">
                                    动画导航：
                                </div>
                                <div class="c-row">
                                    <div class="c-col c-btns">
                                        <div class="c-button">
                                            <div class="c-button-text">按钮名称</div>
                                        </div>
                                        <div class="c-button">
                                            <div class="c-button-text">按钮名称</div>
                                        </div>
                                        <div class="c-button">
                                            <div class="c-button-text">按钮名称</div>
                                        </div>
                                        <div class="c-button">
                                            <div class="c-button-text">按钮名称</div>
                                        </div>
                                    </div>
                                    <div class="c-col">
                                        <div class="c-bottom-mini-panel do-nicescrol" style="width: 140px;margin-top: 8px;">
                                            <ul class="c-list">
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                                <li>item</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="c-bottom-content-panel" style="width: 190px">
                                <div class="c-bottom-content-panel-title">
                                    多方案比选：
                                </div>
                                <div class="c-row">
                                    <div class="c-col">
                                        <div class="c-bottom-mini-panel do-nicescrol" style="width: 100px;margin-top: 8px;margin-left: 8px;">
                                            <div class="c-form-item">
                                                <label class="c-form-item-radio">
                                                    <input type="radio" name="2"/> <span>左右双屏</span>
                                                </label>
                                            </div>
                                            <div class="c-form-item">
                                                <label class="c-form-item-radio">
                                                    <input type="radio" name="2"/> <span>上下双屏</span>
                                                </label>
                                            </div>
                                            <div class="c-form-item">
                                                <label class="c-form-item-radio">
                                                    <input type="radio" name="2"/> <span>左中右三屏</span>
                                                </label>
                                            </div>
                                            <div class="c-form-item">
                                                <label class="c-form-item-radio">
                                                    <input type="radio" name="2"/> <span>上中下三屏</span>
                                                </label>
                                            </div>
                                            <div class="c-form-item">
                                                <label class="c-form-item-radio">
                                                    <input type="radio" name="2"/> <span>四分屏</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="c-col c-btns" style="width: 54px;">
                                        <div class="c-button">
                                            <div class="c-button-text">开始</div>
                                        </div>
                                        <div class="c-button">
                                            <div class="c-button-text">退出</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="c-bottom-content-panel" style="width: 800px">
                                <div class="c-bottom-content-panel-title">
                                    其他面板：
                                </div>
                                
                            </div>



                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/libs/es6-shim.min.js"></script>
    <script type="text/javascript" src="js/libs/polyfill.min.js"></script>
    <script type="text/javascript" src="js/libs/jquery/jquery-2.2.1.min.js"></script>
    <script type="text/javascript" src="js/plugins/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>

</html>
